import React, { PureComponent } from "react";
import { StoreContext } from "./context";
/**
 *
 * @param {function} mapStateToProps
 * @param {function} mapDispatchToProps
 */
export function connect(mapStateToProps, mapDispatchToProps) {
  // 这是传入组件页面配置的state和dispatch
  return function enhanceHOC(WrappedComponent) {
    // WrappedComponent 这里是传进来的组件
    class EnhanceComponent extends PureComponent {
      constructor(props, context) {
        super();
        this.state = {
          storeState: mapStateToProps(context.getState()),
        };
      }
      componentDidMount() {
        this.unsubscribe = this.context.subscribe(() => {
          // 订阅数据 后 使用setState更改render
          this.setState({
            storeState: mapStateToProps(this.context.getState()), // 这里其实就是用来更新render的 这个数据是没有用处的;
          });
        });
      }

      componentWillUnmount() {
        this.unsubscribe();
      }

      render() {
        return (
          <WrappedComponent
            {...this.props} // porps穿透
            {...mapStateToProps(this.context.getState())}
            {...mapDispatchToProps(this.context.dispatch)}
          ></WrappedComponent>
        );
      }
    }
    EnhanceComponent.contextType = StoreContext; // 这个类 绑定了 context里面 creat出来的context;
    return EnhanceComponent;
  };
}
